<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
		<link rel="stylesheet" href="../../css/weui.css">
		<link rel="stylesheet" href="../../css/jQuery_WeUI.css">
		<style type="text/css">
			body{
				background-color: #fff;
			}
			.aui-list .wechat-avatar {
				width: 2.5rem;
				height: 2.5rem;
			}
			.wechat-avatar, .wechat-avatar > img {
				border-radius: 8px;
				height: 2rem;
			}
			.aui-list .aui-list-item-text img {
				width: 14px;
				height: 14px;
			}
			.aui-list .aui-list-item-text {
				-webkit-justify-content: flex-start;
				justify-content: flex-start;
			}
			.aui-list .aui-list-item-right {
				right: 20px;
        top:1rem;
				position: absolute;
			}
			.aui-list .aui-list-item-title {
				font-size: 0.9rem;
				position: relative;
				width: 150px;
				color: #212121;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.aui-list {
				border-top: none;
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list {
					border: none;
					background-size: 100% 0px;
				}
			}
      .apply-active{
        color: #00BFFF
      }
			.message_button{
				border-radius: 5px;
				font-size: 12px;
				color: #fff;
				float:right;
				padding: 5px;
				margin: 8px 4px 0 4px;
			}
			*{
				-webkit-box-sizing: inherit;
								box-sizing: inherit;
								margin: 0;
			}

			.top-box{
				height: 60px;
				/*border-bottom:1px solid #ccc;*/
			}
			.message_status{
				color: #999999;
				font-size: 14px;
				text-align: right;
				margin-right: 8px;
				margin-top: 18px;
			}
			.new-firend-massage:after{
		    content:"";
		    height:0;
		    line-height:0;
		    display:block;
		    visibility:hidden;
		    clear:both;
			}
			.user-img{
				width: 20%;
				float:left;
			}
			.user-img .imgbox{
				width: 40px;
				height: 40px;
				margin: 5px auto;
				border-radius: 6px;
				overflow: hidden;
				margin-top: 30%;
			}
			.user-img .imgbox img{
				width: 100%;
			}
			.group-massage{
				width: 100%;
			}
			.source-massage{
				width: 100%;
				margin-top: 5px;
				color: #333333;
			}
			.chat-massage{
				width: 100%;
			}
			.couple-back{
				display:inline-block;
				width:33%;
			}
			.add-firend-massage{
				padding-left: 10px;
				display:inline-block;
				width:58%;
			}
			.first-text{
				border-radius: 5px;
				/*width: 90%;*/
				background-color: #F7F4F2;
				padding: 6px;
				color: #999999;
				font-size: 14px;
				vertical-align: middle;
			}
			.message_box{
				float:right;
				height:100%;
				width:80%;
				padding-bottom: 5%;
				border-bottom: 1px solid #ccc;
			}
		</style>
	</head>
	<body style="background-color:#fff">
		<div id="blank" class="header" >
				<div v-back.tapmode class="back"></div>
				<span class="title">新的好友</span>
		</div>
		<div class="top-box"></div>
    <div id="app" v-cloak>
    <div class="aui-content aui-margin-b-15 groups">
			<ul class="aui-list aui-media-list weui-cells" >
	      <li class="aui-list-item-middle new-firend-massage weui-cell_swiped" tapmode  v-for="(item, index) in messages" >
					<!-- 头像 -->
					<div class="user-img">
						<div class="imgbox">
							<img :src="item.portrait" alt="">
						</div>
					</div>
					<!-- 添加附带信息 -->
					<div class="message_box">
						<div class="add-firend-massage">
							<div class="group-massage" v-show="item.target_type==2" style="margin:10px 0px">
								<div class="massage-title" style="font-size:12px">{{item.nickname}}申请加入{{item.name}}</div>
							</div>
							<div class="source-massage" v-show="item.target_type==1" style="margin:10px 0px">
								<div class="massage-title" style="font-size:15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</div>
							</div>
							<div class="chat-massage"  style="font-size: 12px;color: #A0A0A0"  v-if="item.add_type==2">通过{{check(item.add_type)}}</div>
							<div class="first-text" v-show="item.comment">{{item.comment}}</div>
						</div>
						<div class="couple-back" >
							<button class="message_button" style="background-color:#35395E" v-show="!item.send&&item.state==1&&item.target_type==1" v-myclick="[item.apply_id, agree]">同意</button>
							<button class="message_button" style="background-color:#35395E" v-show="!item.send&&item.state==1&&item.target_type==2" v-myclick="[item, groupagree]">同意</button>
							<button class="message_button" style="background-color:#d43f3a;margin-right:5px" v-show="!item.send&&item.state==1" v-myclick="[item.apply_id, disagree]">拒绝</button>

							<div class="message_status" v-show="item.state!=1">{{item.status}}</div>
							<div class="message_status" v-show="item.send==1&&item.state==1">已发送</div>
						</div>
					</div>
	      </li>
	    </ul>
    </div>
  </div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
  <script src="../../script/common.js"></script>
  <script src="../../script/url.js"></script>
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script src="../../script/jQuery_WeUI.js"></script>
	<!-- <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script> -->
	<script type="text/javascript">
  var messages ;
		apiready = function() {
			var rong = api.require('rongCloud2');
			setBSImg();
      api.parseTapmode();
      showProgress();
			new Vue({
					el: '#blank',
					methods: {

					}
			});
      var data = {
          member_id: getPrefs('member_id'),
      };
      var callback = function (ret) {
          messages = ret.content;
          for (var i = 0; i < messages.length; i++) {
          messages[i]['status'] = change_remind(messages[i].state);
          if(messages[i]['member_id'] == getPrefs("member_id")){
            messages[i]['send'] = 1;
          }
        }

        initApp();
        api.parseTapmode();
				read_message();
      };
      pinet.post(URL.getApplyList, data, callback);

		}
		 function check(state) {
		 	 switch (state) {
				 case '1':
				return '好友搜索';
				break;
				 case '2':
				return '家族添加';
				break;
					case '3':
				return '二维码添加';
				break;
					case '4':
				return '邀请新用户';
				break;

				 default:

		 	 }
		 }

		function read_message(){
			// 之前调用 init 和 connect 的代码省略\
			var rong = api.require('rongCloud2');
			rong.clearMessagesUnreadStatus({
				conversationType : 'SYSTEM',
				targetId : 'kxscnlbwMID4'
			}, function(ret, err) {
			})
			api.sendEvent({
				name : 'hhxx'
			});
		}
    function change_remind(state){
      switch (state) {
        case '2':
        return '已拒绝';
        break;
        case '3':
        return '已同意';
        break;
        case '4':
        return '已过期';
        break;
        default:
				return '已同意';
				break;
      }

    }

    function initApp() {

        vm = new Vue({
            el: '#app',
            data: {
                messages:messages,
            },
            computed: {

            },
            methods: {

              agree:function(id){
                var data = {
                    member_id: getPrefs('member_id'),
                    apply_id:id
                };
                var callback = function (ret) {
                  api.sendEvent({
                    name : 'hhxx',
                  });
									vm.reload();

									// var params = {to:1};
	                // closeWin('index');
	                // openWin('../../index', params, {slidBackEnabled:false,reload:true});
                };
                pinet.post(URL.addFriend, data, callback);
              },
							groupagree:function(item){
								var data = {
										member_id: getPrefs('member_id'),
										apply_id:item.apply_id,
										clan_id:item.target_id,
								};
								var callback = function (ret) {
									// api.closeWin();
									vm.reload();

										api.parseTapmode();
								};
								pinet.post(URL.addClanMember, data, callback);
							},
              disagree:function(id){
                var data = {
                    member_id: getPrefs('member_id'),
                    apply_id:id
                };

                var callback = function (ret) {
                    api.toast({
                      msg : '拒绝成功'
                    });
										// api.closeWin();
										vm.reload();
                    api.parseTapmode();
                };
                pinet.post(URL.refuseApply, data, callback);
              },
							reload:function(){
								var data = {
										member_id: getPrefs('member_id'),
								};
								var callback = function (ret) {
										messages = ret.content;
										for (var i = 0; i < messages.length; i++) {
										messages[i]['status'] = change_remind(messages[i].state);
										if(messages[i]['member_id'] == getPrefs("member_id")){
											messages[i]['send'] = 1;
										}
									}
									vm.messages = messages;
								};
								pinet.post(URL.getApplyList, data, callback);
							}
            }

        });
    }

		function getsys(){
			api.openWin({
				reload : true,
				name : 'win_sys_message',
				url : '../win/win_sys_message.html',
				pageParam : {
					id : id,
					zh : xm,
					tx : tx
				},
				vScrollBarEnabled : false,
			});
		}

		function lt(id, xm, tx) {
			api.openWin({
				reload : true,
				name : 'chat',
				url : '../win/win_chat.html',
				pageParam : {
					id : id,
					zh : xm,
					tx : tx
				},
				vScrollBarEnabled : false,
			});
			if ($api.getStorage('member_id') == id) {
			} else {
				var rong = api.require('rongCloud2');
				rong.clearMessagesUnreadStatus({
					conversationType : 'PRIVATE',
					targetId : id
				}, function(ret, err) {
				})
			}
			api.sendEvent({
				name : 'hhxx'
			});
		}

		function group(id, zh, tx) {
			api.openWin({
				reload : true,
				name : 'win_group',
				url : '../win/win_group.html',
				vScrollBarEnabled : false,
				pageParam : {
					group_id : id,
					group_zh : zh,
					group_tx : tx
				}
			});
			var rong = api.require('rongCloud2');
			rong.clearMessagesUnreadStatus({
				conversationType : 'GROUP',
				targetId : id
			}, function(ret, err) {
			})
			api.sendEvent({
				name : 'hhxx'
			});
		}

		//json格式转换
		function transExtra(arg) {
			var result = '';
			try {
				result = eval('(' + arg + ')');
			} catch (e) {
				result = arg.slice(1, -1);
			} finally {
			}
			return result;
		}

		function sj(sj) {
			var nowt = new Date().getTime();
			var a = new Date(parseInt(sj));
			var b = new Date(parseInt(nowt));
			var date1 = Date.parse(format(a, 4));
			var date2 = Date.parse(format(b, 4));
			var xxsj = Math.ceil((date2 - date1) / (60 * 1000))
			var tian1 = new Date(date1).getDate()
			var tian2 = new Date(date2).getDate()

			if (xxsj <= 1 && xxsj >= 0) {
				return "就刚才";
			} else if (xxsj <= 10 && xxsj > 1) {
				return xxsj + "分钟前";
			} else if (xxsj <= 60 && xxsj > 10) {
				return format(a, 1);
			} else if (xxsj <= 2879 && xxsj > 60) {
				if(tian2 - tian1 == 1){
					return '昨天' + format(a, 1);
				}else{
					return format(a, 1);
				}
			} else if (xxsj <= 10080 && xxsj > 2879) {
				return format(a, 6);
			} else if (xxsj > 10080) {
				return format(a, 3);
			} else {
				return format(a, 3);
			}
		}

		//json格式转换
		function transExtra(arg) {
			var result = '';
			try {
				result = eval('(' + arg + ')');
			} catch (e) {
				result = arg.slice(1, -1);
			} finally {
			}
			return result;
		}

		//格式化时间
		function format(now, type) {
			var show_day = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
			var year = now.getFullYear().toString();
			var month = (now.getMonth() + 1).toString();
			var day = (now.getDate()).toString();
			var tian = now.getDay().toString();
			var hour = (now.getHours()).toString();
			var minute = (now.getMinutes()).toString();
			var second = (now.getSeconds()).toString();
			if (hour.length == 1) {
				hour = "0" + hour;
			}
			if (minute.length == 1) {
				minute = "0" + minute;
			}
			if (second.length == 1) {
				second = "0" + second;
			}
			if (type == 1) {
				var dateTime = hour + ":" + minute;
			} else if (type == 2) {
				var dateTime = show_day[tian] + " " + hour + ":" + minute
			} else if (type == 3) {
				var dateTime = year + "-" + month + "-" + day
			} else if (type == 4) {
				var dateTime = year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
			} else if (type == 5) {
				var dateTime = year + "年" + month + "月" + day + " " + hour + ":" + minute + ":" + second;
			} else if (type == 6) {
				var dateTime = month + "月" + day + " " + hour + ":" + minute + ":" + second;
			} else if (type == 7) {
				var dateTime = show_day[tian];
			}
			return dateTime;
		}

	</script>
</html>
